<template>
  <div>
    <div class="box-body">
      <el-col :xl="15" :lg="14" :md="15" :sm="15" :xs="15">
        <el-form :model="down" label-width="90px" :rules="rules" ref="imgCode">
          <el-form-item class="mb20" label="定制数量：" prop="num">
            <el-input v-model.number="down.num" class="w100"></el-input>
          </el-form-item>
          <el-form-item class="mb20" label="二维码样式：">
            <!-- <el-radio v-model="radios" :label="0" @change="radio">样式一</el-radio>
            <el-radio v-model="radios" :label="1" @change="radio">样式二</el-radio> -->
            <el-radio v-model="radios" :label="2" @change="radio">简易版</el-radio>
          </el-form-item>
          <el-form-item v-if="radios!==2" class="mb20" label="支付方式：">
            <el-checkbox-group v-model="check_list" @change="payCheck">
              <el-checkbox v-for="(item,index) in pay_check_group" :style="{marginRight: index === 0 ? '10px': ''}" :label="index" :key="index">{{ item.text }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-col>
      
      <div>
        <p>样本示例：</p>
        <canvas ref="canvas" width="230" height="323">您的浏览器不支持canvas，请升级新的浏览器！</canvas>
      </div>
    </div>
  </div>
</template>

<script>
import { qrCodeAddPost } from '@/api/myAngent'

export default {
  data() {
    const valid = (rule, value, callback) => {
      if (!value || value > 100) {
        callback(new Error('请输入合法数字且不可大于100'))
      } else {
        callback()
      }
    }
    return {
      radios: 2,
      bgUrl: process.env.MAT_HOST + '/merchant/qrcodes/canvas-bg3.png', // @默认样式一
      codeUrl: null, // @动态获取二维码图片
      shop_name: null,
      check_list: [],
      img_base64: '',
      code_style_check: '',
      pay_check_group: [
        {
          text: '微信支付',
          url: process.env.MAT_HOST + '/merchant/qrcodes/wx.png'
        },
        {
          text: '支付宝',
          url: process.env.MAT_HOST + '/merchant/qrcodes/zfb.png'
        },
        {
          text: '翼支付',
          url: process.env.MAT_HOST + '/merchant/qrcodes/yzf.png'
        },
        {
          text: '银联支付',
          url: process.env.MAT_HOST + '/merchant/qrcodes/yl.png'
        },
        {
          text: '京东钱包',
          url: process.env.MAT_HOST + '/merchant/qrcodes/jd.png'
        }
      ],
      down: {
        softwares: '',
        style: [],
        num: ''
      },
      rules: {
        num: [{ required: true, trigger: 'blur', validator: valid }]
      }
    }
  },
  props: {
    id: {
      type: Number
    },
    name: {
      type: String
    },
    code: {
      type: String,
      required: true
    }
  },
  methods: {
    init() {
      this.check_list = [] // 清空多选已选择数组 解决重复保存
      this.fruit = [] // 清空初试多选数组 解决重复保存
      this.code_style_check = 0 // 清空单选选已选择数据 解决重复保存
      this.code_style = 0 // 清空初试选择数据 解决重复保存
      this.shop_name = this.name
      this.codeUrl = this.code
      this.radio(2)
    },
    canvas(i, v, c, t) {
      const cav = this.$refs.canvas // 获取canvas
      const ctx = cav.getContext('2d')
      const width = cav.width // 获取canvas宽
      const height = cav.height // 获取canvas高
      const bg_img = new Image() // 实例化背景 img
      const code_img = new Image() // 实例化二维码 img
      code_img.src = c
      if (v === 2) { // 判断参数
        ctx.clearRect(0, 0, width, height)
        ctx.fillStyle = '#eee'
        ctx.fillRect(0, 0, width, height)
        ctx.beginPath()
        code_img.onload = () => { // 图片加载完成执行
          ctx.drawImage(code_img, 50, 81.5, 130, 130)
        }
      } else {
        bg_img.src = i
        bg_img.onload = () => { // 图片加载完成执行
          this.drawImage(ctx, bg_img, code_img, width, height, v)
          if (v === 1) {
            ctx.font = 'bold 20px Arial'
            ctx.fillStyle = '#fff'
            ctx.textAlign = 'center'
            ctx.fillText(t, width / 2, 70)
          }
          this.logo(ctx, v, this.check_list)
        }
      }
    },
    logo(c, v, l) {
      if (v === 0) {
        for (let i = 0; i < l.length; i++) {
          const logo = new Image()
          logo.src = this.pay_check_group[l[i]].url
          c.beginPath()
          logo.onload = () => {
            c.drawImage(logo, (i * 40) + 20, 55, 32, 42)
          }
        }
      } else if (v === 1) {
        for (let i = 0; i < l.length; i++) {
          const logo = new Image()
          logo.src = this.pay_check_group[l[i]].url
          c.beginPath()
          logo.onload = () => {
            c.drawImage(logo, (i * 40) + 20, 247, 32, 42)
          }
        }
      }
    },
    drawImage(c, bi, ci, w, h, v) { // ctx,img,width,height
      c.clearRect(0, 0, w, h)
      c.drawImage(bi, 0, 0, w, h)
      c.beginPath()
      v === 0 ? c.drawImage(ci, 50, 112, 130, 130) : c.drawImage(ci, 50, 88, 130, 130)
    },
    radio(v) {
      this.code_style_check = v
      if (v === 0) {
        const url = this.bgUrl = process.env.MAT_HOST + '/merchant/qrcodes/canvas-bg1.png' // 样式背景
        const code = this.codeUrl // 当前行二维码
        this.canvas(url, v, code, this.check_list) // 绘制canvas
      } else if (v === 1) {
        const url = this.bgUrl = process.env.MAT_HOST + '/merchant/qrcodes/canvas-bg2.png' // 样式背景
        const code = this.codeUrl // 当前行二维码
        const text = this.shop_name // 当前行店铺名称
        this.canvas(url, v, code, text) // 绘制canvas
      } else if (v === 2) {
        const code = this.codeUrl // 当前行二维码
        this.canvas(this.bgUrl, v, code, [])
      }
    },
    payCheck(v) {
      this.check_list = v
      this.radio(this.code_style_check)
    },
    imgDown() {
      this.$refs['imgCode'].validate((valid) => {
        if (valid) {
          this.down.softwares = this.radios
          this.down.style = this.check_list
          if (this.radios === 2) {
            this.check_list = []
          }
          qrCodeAddPost(this.down).then(response => {
            if (response.data.errorCode === 0) {
              this.$message.success(response.data.errorMsg)
              this.$refs['imgCode'].resetFields()
              this.down.num = null
              this.down.softwares = ''
              this.down.style = []
              this.$emit('show')
            } else {
              this.$message.error(response.data.errorMsg)
            }
          })
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
  .box-body {
    padding: 15px 0;
    & > div {
      display: inline-block;
      vertical-align: top;
    }
    /deep/ .el-checkbox:first {
      margin-right: 10px;
    }
    .el-checkbox+.el-checkbox {
      margin-left: 0;
      margin-right: 10px;
    }
  }
</style>
